<script setup>
import Header from '@/components/header/App.vue'
import Breadcrumb from '@/components/breadcrumb/App.vue'
import Sidebar from '@/components/sidebar/App.vue'
import Footer from '@/components/footer/App.vue'
import { ref } from 'vue'

const featureList = ref([
  {
    name: '数据驱动',
    content: '基于大数据分析的精准营销策略，确保营销效果可衡量',
  },
  {
    name: '全渠道覆盖',
    content: '整合PC端、移动端、社交媒体等多渠道营销资源',
  },
  {
    name: '定制化方案',
    content: '根据企业特点和行业特性制定个性化营销方案',
  },
  {
    name: '效果保障',
    content: '严格的KPI考核机制，确保营销目标达成',
  }])
const featureList1 = ref([
  {
    name: '战略导向',
    content: '将品牌建设与企业战略紧密结合，确保品牌发展方向正确',
  },
  {
    name: '创意设计',
    content: '专业的设计团队，打造独特而有吸引力的品牌视觉形象',
  },
  {
    name: '系统化方法',
    content: '采用国际先进的品牌建设方法论，确保品牌建设效果',
  },
  {
    name: '长期陪伴',
    content: '提供品牌长期管理服务，持续提升品牌价值',
  }])
</script>

<template>
  <Header></Header>
  <div class="details">
    <Breadcrumb></Breadcrumb>
    <h1 class="page-title">服务能力</h1>
    <p class="page-subtitle">我们提供全方位的专业服务，助力企业数字化转型和创新发展</p>

    <div class="service-section">
      <h2 class="section-title">核心服务能力</h2>
      <p>创新服务平台整合优质资源，构建了覆盖企业全生命周期的服务体系，为各类企业提供专业、高效的一站式服务。</p>

      <div class="service-grid">
        <!-- 互联网营销 -->
        <div class="service-card">
          <div class="service-icon">🌐</div>
          <h3>互联网营销</h3>
          <p>提供全方位的数字营销解决方案，包括搜索引擎优化、社交媒体营销、内容营销等，帮助企业提升品牌曝光和销售转化。</p>
          <a href="javascript:;">了解详情</a>
        </div>

        <!-- 品牌建设 -->
        <div class="service-card">
          <div class="service-icon">🏷️</div>
          <h3>品牌建设</h3>
          <p>从品牌定位、视觉设计到传播策略，提供一站式品牌建设服务，助力企业打造差异化竞争优势。</p>
          <a href="javascript:;">了解详情</a>
        </div>

        <!-- 人才培养 -->
        <div class="service-card">
          <div class="service-icon">👨‍🎓</div>
          <h3>人才培养</h3>
          <p>定制化人才培养方案，涵盖技能培训、管理培训、数字化转型培训等，为企业发展提供人才支撑。</p>
          <a href="javascript:;">了解详情</a>
        </div>

        <!-- 信用服务 -->
        <div class="service-card">
          <div class="service-icon">🔖</div>
          <h3>信用服务</h3>
          <p>提供企业信用评估、信用修复、信用管理等服务，帮助企业建立良好信用形象，提升市场竞争力。</p>
          <a href="javascript:;">了解详情</a>
        </div>

        <!-- 金融/保险 -->
        <div class="service-card">
          <div class="service-icon">💰</div>
          <h3>金融/保险</h3>
          <p>整合银行、保险等金融机构资源，为企业提供融资对接、保险方案设计等专业金融服务。</p>
          <a href="javascript:;">了解详情</a>
        </div>

        <!-- 网络安全 -->
        <div class="service-card">
          <div class="service-icon">🔒</div>
          <h3>网络安全</h3>
          <p>提供网络安全评估、防护体系建设、数据安全保护等服务，保障企业信息系统安全稳定运行。</p>
          <a href="javascript:;">了解详情</a>
        </div>

        <!-- 会务服务 -->
        <div class="service-card">
          <div class="service-icon">🎤</div>
          <h3>会务服务</h3>
          <p>专业会议活动策划执行服务，包括活动策划、场地布置、嘉宾邀请、现场管理等全流程服务。</p>
          <a href="javascript:;">了解详情</a>
        </div>

        <!-- 技术支持 -->
        <div class="service-card">
          <div class="service-icon">🛠️</div>
          <h3>技术支持</h3>
          <p>提供技术咨询、系统开发、运维支持等服务，助力企业实现数字化转型和技术创新。</p>
          <a href="javascript:;">了解详情</a>
        </div>
      </div>
    </div>

    <div class="service-section service-detail">
      <h2 class="section-title">服务详情</h2>

      <!-- 互联网营销 -->
      <div class="detail-item">
        <h3>互联网营销服务</h3>
        <div class="detail-content">
          <img src="https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/meikou/banner/nuandong_sj.png" alt="互联网营销" class="detail-image">
          <div class="detail-text">
            <p>我们的互联网营销服务团队由资深数字营销专家组成，拥有丰富的行业经验和成功案例。我们采用数据驱动的营销策略，结合最新的数字营销技术，为客户提供全方位的互联网营销解决方案。</p>
            <p>服务内容包括：搜索引擎优化(SEO)、搜索引擎营销(SEM)、社交媒体营销(SMM)、内容营销、电子邮件营销、移动营销、视频营销等。我们通过精准的目标受众定位和效果评估，确保每一分营销投入都能获得最大回报。
            </p>
          </div>
        </div>

        <h4>核心优势</h4>
        <div class="feature-list">
          <div class="feature-item" v-for="(item, index) in featureList" :key="index">
            <h4>{{item.name}}</h4>
            <p>{{ item.content }}</p>
          </div>
        </div>
      </div>

      <!-- 品牌建设 -->
      <div class="detail-item">
        <h3>品牌建设服务</h3>
        <div class="detail-content">
          <img src="https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/meikou/banner/nuandong_sj.png" alt="品牌建设" class="detail-image">
          <div class="detail-text">
            <p>品牌是企业最宝贵的无形资产。我们的品牌建设服务从市场调研入手，深入分析行业趋势和竞争格局，帮助企业明确品牌定位，构建独特的品牌形象和品牌价值体系。</p>
            <p>服务内容包括：品牌战略规划、品牌定位、品牌命名、品牌视觉识别系统设计、品牌传播策略、品牌资产管理等。我们通过系统化的品牌建设流程，助力企业打造具有持久生命力的强势品牌。</p>
          </div>
        </div>

        <h4>核心优势</h4>
        <div class="feature-list">
          <div class="feature-item" v-for="(item, index) in featureList1" :key="index">
            <h4>{{ item.name }}</h4>
            <p>{{ item.content }}</p>
          </div>
        </div>
      </div>

      <!-- 人才培养 -->
      <div class="detail-item">
        <h3>人才培养服务</h3>
        <div class="detail-content">
          <img src="https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/meikou/banner/nuandong_sj.png" alt="人才培养" class="detail-image">
          <div class="detail-text">
            <p>人才是企业发展的核心动力。我们的人才培养服务基于对企业发展战略和人才现状的深入分析，提供定制化的培训解决方案，帮助企业构建高素质人才队伍。</p>
            <p>服务内容包括：培训需求分析、培训体系设计、课程开发、培训实施、效果评估等。我们拥有丰富的培训资源和专业的培训师资，涵盖管理技能、专业技术、数字化转型等多个领域，满足企业不同层次人才的培养需求。</p>
          </div>
        </div>

        <h4>核心优势</h4>
        <div class="feature-list">
          <div class="feature-item">
            <h4>需求导向</h4>
            <p>基于企业实际需求设计培训方案，确保培训针对性</p>
          </div>

          <div class="feature-item">
            <h4>实战教学</h4>
            <p>理论与实践相结合，注重培养学员解决实际问题的能力</p>
          </div>

          <div class="feature-item">
            <h4>师资雄厚</h4>
            <p>汇聚行业专家和实战派讲师，确保培训质量</p>
          </div>

          <div class="feature-item">
            <h4>效果跟踪</h4>
            <p>建立培训效果评估体系，持续优化培训方案</p>
          </div>
        </div>
      </div>
    </div>

    <div class="service-section case-section">
      <h2 class="section-title">成功案例</h2>
      <p>我们已为众多企业提供了优质服务，助力企业实现业务增长和创新发展。</p>

      <div class="case-list">
        <div class="case-card">
          <img src="https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/meikou/banner/nuandong_sj.png" alt="案例1" class="case-image">
          <div class="case-content">
            <h4>某电商企业数字营销项目</h4>
            <p>通过精准的数字营销策略，帮助客户实现销售额增长300%，ROI提升5倍。</p>
            <a href="javascript:;">查看详情 →</a>
          </div>
        </div>

        <div class="case-card">
          <img src="https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/meikou/banner/nuandong_sj.png" alt="案例2" class="case-image">
          <div class="case-content">
            <h4>某制造业企业品牌升级项目</h4>
            <p>全面升级品牌形象和传播策略，品牌知名度提升200%，市场份额增长15%。</p>
            <a href="javascript:;">查看详情 →</a>
          </div>
        </div>

        <div class="case-card">
          <img src="https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/meikou/banner/nuandong_sj.png" alt="案例3" class="case-image">
          <div class="case-content">
            <h4>某金融机构人才培养项目</h4>
            <p>定制化人才培养计划，培养200名复合型金融人才，人才留存率提升40%。</p>
            <a href="javascript:;">查看详情 →</a>
          </div>
        </div>
      </div>
    </div>

    <Footer></Footer>
  </div>
</template>

<style scoped>
.details{
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}/* 页面标题 */
.page-title {
  font-size: 32px;
  text-align: center;
  margin: 40px 0;
  color: #1e5799;
  position: relative;
  padding-bottom: 20px;
}

.page-title:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 4px;
  background: #207cca;
}

.page-subtitle {
  text-align: center;
  font-size: 18px;
  color: #666;
  max-width: 800px;
  margin: 0 auto 50px;
  line-height: 1.8;
}

/* 服务能力内容区 */
.service-section {
  background-color: white;
  border-radius: 8px;
  padding: 40px;
  margin-bottom: 40px;
  box-shadow: 0 3px 15px rgba(0, 0, 0, 0.05);
}

.section-title {
  font-size: 24px;
  margin-bottom: 30px;
  padding-bottom: 15px;
  border-bottom: 2px solid #f0f0f0;
  color: #1e5799;
  position: relative;
}

.section-title:after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 80px;
  height: 2px;
  background: #207cca;
}

/* 服务能力网格 */
.service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 30px;
  margin-top: 30px;
}

.service-card {
  background-color: #f9fbff;
  border-radius: 8px;
  padding: 30px;
  border: 1px solid #e0e9ff;
  transition: transform 0.3s, box-shadow 0.3s;
}

.service-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(30, 87, 153, 0.1);
  background-color: white;
}

.service-icon {
  font-size: 48px;
  color: #207cca;
  margin-bottom: 20px;
}

.service-card h3 {
  font-size: 20px;
  margin-bottom: 15px;
  color: #1e5799;
}

.service-card p {
  color: #666;
  font-size: 15px;
  line-height: 1.7;
  margin-bottom: 20px;
}

.service-card a {
  display: inline-block;
  background-color: #1e5799;
  color: white;
  padding: 8px 20px;
  border-radius: 4px;
  text-decoration: none;
  font-size: 14px;
  transition: background-color 0.3s;
}

.service-card a:hover {
  background-color: #207cca;
}

/* 服务详情 */
.service-detail {
  margin-top: 50px;
}

.detail-item {
  margin-bottom: 50px;
}

.detail-item h3 {
  font-size: 22px;
  margin-bottom: 20px;
  color: #1e5799;
  padding-bottom: 10px;
  border-bottom: 1px solid #f0f0f0;
}

.detail-content {
  display: flex;
  margin-bottom: 30px;
}

.detail-image {
  width: 400px;
  height: 250px;
  object-fit: cover;
  border-radius: 8px;
  margin-right: 30px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.detail-text {
  flex: 1;
  font-size: 16px;
  color: #555;
  line-height: 1.8;
}

.feature-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.feature-item {
  background-color: #f0f7ff;
  border-radius: 8px;
  padding: 20px;
  border-left: 4px solid #207cca;
}

.feature-item h4 {
  font-size: 16px;
  margin-bottom: 10px;
  color: #1e5799;
}

.feature-item p {
  color: #666;
  font-size: 14px;
}

/* 案例展示 */
.case-section {
  margin-top: 50px;
}

.case-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 30px;
  margin-top: 30px;
}

.case-card {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s;
}

.case-card:hover {
  transform: translateY(-5px);
}

.case-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.case-content {
  padding: 20px;
  background-color: white;
}

.case-content h4 {
  font-size: 18px;
  margin-bottom: 10px;
  color: #1e5799;
}

.case-content p {
  color: #666;
  font-size: 14px;
  margin-bottom: 15px;
}

.case-content a {
  display: inline-block;
  color: #207cca;
  text-decoration: none;
  font-weight: bold;
  font-size: 14px;
}
</style>